<template>
  <div style="background: #fff">
    <Search />
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="content">
        <div class="content-left">
          <van-sidebar v-model="activeKey">
            <van-collapse v-model="activeName" accordion>
              <van-collapse-item
                v-for="item in list"
                :key="item.id"
                :title="item.name"
                :name="item.name"
              >
                <van-sidebar-item
                  v-for="sub in item.children"
                  :key="sub.id"
                  :title="sub.name"
                  @click="getleftTab(sub.id)"
                />
              </van-collapse-item>
            </van-collapse>
          </van-sidebar>
        </div>
        <div class="content-right">
          <div class="content-right-up">
            <van-tabs v-model="active" @click="sort">
              <van-tab title="销量排序"></van-tab>
              <van-tab title="价格排序"></van-tab>
              <van-tab title="评论排序"></van-tab>
            </van-tabs>
          </div>
          <div  v-if="changedata.length" class="content-right-down">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset="50"
          >
            <div >
              <van-card
                v-for="item in changedata"
                :key="item.id * Date.now() * Math.random()"
                num="2"
                :price="item.price | money"
                :title="item.title"
                :thumb="item.cover_url"
                @click="Godetail(item.id)"
              />
            </div>
          </van-list>
          </div>
          <div class="content-right-down" v-else>
            <van-empty description="暂无数据" />
          </div>
        </div>
      </div>
    </van-pull-refresh>
    <tabbar />
    <Gotop />
  </div>
</template>

<script>
import Tabbar from '@components/Tabbar'
import Search from '@components/Search'
import Gotop from '@components/GoTop'

import { getList, getListSort } from '@api/home'
export default {
  name: 'cate',
  data () {
    return {
      activeKey: '',
      activeName: 1,
      active: 0,
      list: [],
      sortKey: 'sales',
      tabId: 0,
      isLoading: false,
      loading: false,
      finished: false,
      goods: {
        price: { page: 1, list: [] },
        sales: { page: 1, list: [] },
        comments_count: { page: 1, list: [] }
      }
    }
  },
  created () {
    this.getList()
    this.getListSort()
  },
  filters: {
    money (val) {
      return val.toFixed(2)
    }
  },
  methods: {
    Godetail (id) {
      this.$router.push(`/detail/${id}`)
    },
    onLoad () {
      this.goods[this.sortKey].page++
      getListSort(this.sortkey, this.tabId, this.goods[this.sortKey].page).then((res) => {
        if (!res.data.goods.data.length) {
          this.finished = true
        }
        if (res.status === 200) {
          this.goods[this.sortKey].list = [...this.goods[this.sortKey].list, ...res.data.goods.data]
        }
        this.loading = false
      })
    },
    onRefresh () {
      this.goods = {
        price: { page: 1, list: [] },
        sales: { page: 1, list: [] },
        comments_count: { page: 1, list: [] }
      }
      this.active = 0
      this.sortKey = 'sales'
      this.getListSort()
    },
    async getListSort () {
      await getListSort('sales', this.tabId).then((res) => {
        if (res.status === 200) {
          this.goods.sales.list = res.data.goods.data
        }
      })
      await getListSort('price', this.tabId).then((res) => {
        if (res.status === 200) {
          this.goods.price.list = res.data.goods.data
        }
      })
      await getListSort('comments_count', this.tabId).then((res) => {
        if (res.status === 200) {
          this.goods.comments_count.list = res.data.goods.data
        }
      })
      this.isLoading = false
    },
    getleftTab (cid) {
      this.tabId = cid
      this.finished = false
      this.getListSort()
    },
    sort (index) {
      this.finished = false
      // 更换tab
      const arr = ['sales', 'price', 'comments_count']
      this.sortKey = arr[index]
      // this.changedata[this.sortKey]
    },
    getList () {
      getList().then((res) => {
        if (res.status === 200) {
          this.list = res.data.categories
        }
      })
    }
  },
  components: { Tabbar, Search, Gotop },
  computed: {
    changedata () {
      return this.goods[this.sortKey].list
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  margin-top: 54px;
  display: flex;
  &-left {
    margin-top: 44px;
  }
  &-right {
    flex: 1;
    display: flex;
    flex-direction: wrap;
    flex-direction: column;
    &-up {
      width: 100%;
      height: 44px;
    }
    &-down {
      flex: 1;
      height: 100vh;
      margin-bottom: 54px;
    }
  }
}
/deep/.van-sidebar {
  width: 125px;
}
/deep/.van-sidebar-item__text {
  width: 80px;
}
</style>
